<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
    <title>bootstrap-admin开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-body-tertiary py-3">

<div class="min-vh-100 p-2 bg-body-tertiary d-flex flex-column align-items-center justify-content-center">
    <h2 class="">上午 11:11</h2>
    <p class="text-secondary">2023年 5月 20日 星期六</p>
    <i class="bi bi-person-circle bsa-fs-60 text-secondary"></i>
    <p>Administrator</p>
    <form id="form" style="width: 280px;max-width: 100%">
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="请输入登录密码" aria-label="锁屏密码" name="lockpwd">
            <button class="btn btn-outline-secondary" type="submit">
                <i class="bi bi-box-arrow-in-right"></i>
            </button>
        </div>
    </form>
</div>

<!--回到顶部开始-->
<a href="javaScript:" class="bsa-back-to-top"><i class='bi bi-arrow-up-short'></i></a>
<!--回到顶部结束-->


<script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="../lib/formvalidation/js/formValidation.js"></script>
<script src="../lib/formvalidation/js/framework/bootstrap.js"></script>
<script src="../lib/formvalidation/js/language/zh_CN.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>
<script src="../dist/js/app.js"></script>

<!--假数据模拟,生产环境中请直接删除该js-->
<script src="../dist/js/bootstrap-admin.mock.js"></script>

<script>


    $(function () {


        //前端表单验证
        $('#form').formValidation({
            fields: {
                lockpwd: {
                    validators: {
                        notEmpty: true,
                    }
                }
            }
        }).on('success.form.fv', function (e) {
            //阻止表单提交
            e.preventDefault();

            //得到表单对象
            let $form = $(e.target);
            //获取数据
            let data = $form.serialize();


            //发起ajax请求
            $.ajax({
                method: 'post',
                url: '/login',
                //表单数据
                data: data,
            }).then(response => {
                if (response.code === 200) {
                    $.toasts({
                        type: 'success',
                        content: '登录成功',
                        onHidden: function () {
                            top.location.replace('/index.html');
                        }
                    })
                }
            });
        });


    })


</script>

</body>
</html>
